<template>
<div id="address">
    <div class="pages">
        <div v-show="action == 'show'" class="page">
            <sub-page-header title="管理收货地址" :triggerBack="true" @back="onBack"></sub-page-header>
            <address-list :addresses="addresses" :set_default="set_default" :editAddress="editAddress" :deleteAddress="deleteAddress" :showSelect="showSelect" @select="onSelect"></address-list>

            <button @click="createAddress" class="btn-footer btn btn-normal btn-rect btn-block">新增地址</button>
        </div>
        <div v-show="action == 'save'" class="page">
            <sub-page-header :triggerBack="true" @back="action='show'" :title="subText"></sub-page-header>
            <save-address v-model="activeAddress" @save="onSave"></save-address>
        </div>
    </div>
    <div class="bottom-margin"></div>
</div>
</template>

<script>
import SubPageHeader from '~/components/SubPageHeader.vue';
import AddressList from '~/components/AddressList.vue';
import SaveAddress from '~/components/SaveAddress.vue';
import api from '~/api/api.js';
import Picker from 'better-picker';

export default {
    components: {
        SubPageHeader,
        AddressList,
        SaveAddress
    },
    props: {
        showSelect: {
            type: Boolean,
            default: false
        },
        back: {
            type: [Function, String],
            default: this.onBack,
        },
        triggerBack: {
            type: Boolean,
            default: true
        }
    },
    data () {
        return {
            action: 'show',
            defaultAddress: 0,
            activeAddress: {
                is_default: 0,
            },
            addresses: [],
            rules: {
                accept_name: [
                    {required: true, message: '请输入收货人'},
                    {max:20, message: '收货人名称不能超过20个字符'},

                ],
                mobile: [
                    {required: true, message: '请输入手机号'},
                    {pattern: /^1[0-9]{10}$/, message: '请输入正确的手机号', trigger: 'blur'}
                ],
                address: [
                    {required: true, message: '请输入详细地址'}
                ]
            }
        }
    },
    computed : {
        // 标题头
        subText () {
            return this.activeAddress.id ? '编辑收货地址' : '新增收货地址';
        }
    },
    created () {
        api.get('/address/index')
        .then(response => {
            this.addresses = response.data.addresses;
            this.$emit('loadedAddresses', this.addresses);
        });
    },
    methods: {
        onBack () {
            if (this.triggerBack) {
                this.$router.back();    
            } else {
                console.log(1);
                this.$emit('back');
            }
            
        },
        // 保存改变
        onSave (address) {
            api.post('/address/save', address)
            .then(response => {
                if(response.data.is_default == 1) {
                    this.addresses.forEach(function (item) {
                        if (item.id != response.data.id) {
                            item.is_default = 0;    
                        }
                    });
                }
                if(!this.activeAddress.id) {
                    this.addresses.push(response.data);
                }

                this.$message.success('保存成功');
                this.action = 'show';

            });
        },
        // 新增地址显示
        createAddress () {
            this.activeAddress = {
                is_default: 0,
            };
            this.action = 'save';
            window.scrollTo(0, 0);
        },
        // 编辑地址
        editAddress (item) {
            window.scrollTo(0, 0);
            this.activeAddress=item;
            this.action='save';
        },
        // 设置默认地址
        set_default (index) {
            api.post('/address/set_default', {id: this.addresses[index].id})
            .then(response => {
                this.$message.success('设置成功');
            });

            this.addresses.forEach(function (item, key) {
                if (index != key) {
                    item.is_default = 0;
                }
            });
        },
        // 删除地址
        deleteAddress (index) {
            this.$confirm('您确定要删除该地址吗？', '提示', {
                confirmButtonText: '是',
                cancelButtonText: '否，点错了',
                type: 'warning'
            }).then(() => {
                api.post('/address/delete', {id: this.addresses[index].id})
                .then(response => {
                    this.$message.success('删除成功');
                })
                .catch(error => {
                    this.$message.error('删除失败');
                })
                this.addresses.splice(index, 1);
            });
        },
        // 选择了某地址
        onSelect (item) {
            this.$emit('select', item);
        }
    }
}
</script>

<style scoped>
.page {
    height: 100%;
    margin-bottom: 60px;
}
.no-address {
    text-align: center;
    vertical-align: middle;
    font-size: 0.32rem;
    color: #606060;
    line-height: 1.5;
    padding-top: 3.6rem;
}

.no-address .icon-shouhuodizhi {
    font-size: 80px;
}

.btn-footer {
    height: 50px;
    line-height: 50px;
    position: fixed;
    bottom: 0px;
    left: 0px;
    width: 100%;
    padding: 0;
    z-index: 99;
}

.save-form {
    padding: 15px;
}
</style>

<style>
.address .el-switch.is-disabled .el-switch__input:checked+.el-switch__core {
    border-color: #b21014!important;
    background: #b21014!important;
}
.save-form input {
    border: none;
}

.save-form .el-form-item {
    border-bottom : 1px solid #eaeaea;
}

.el-cascader-menu {
    min-width: 100px;
}
</style>